<div class="background">
    <div class="background_left">
        <div class="gutter-row">
            <div class="font1 title">
                CPU利用率
            </div>
            <div class="font3">
                15%
            </div>
            <nz-progress [nzPercent]="15" nzSize="small" [nzShowInfo]="false" [nzStrokeColor]="'#13C2C2'"></nz-progress>
        </div>
        <div class="gutter-row">
            <div class="font1 title">
                GPU利用率
            </div>
            <div class="font3">
                80%
            </div>
            <nz-progress [nzPercent]="80" nzSize="small" nzStatus="exception" [nzShowInfo]="false"></nz-progress>
        </div>
        <div class="gutter-row">
            <div class="font1 title">
                内存用量
            </div>

            <div class="gutter-left">
                <div class="font3">
                    10.5/30 <span class="font2" style="margin: 0px 5px">GB</span>
                </div>
                <div class="font2" style="margin: 5px 0px">
                    可用容量/总容量
                </div>
            </div>
            <div class="cut"></div>
            <div class="gutter-right">
                <div class="font3">
                    75%
                    <span class="font2">
            使用率
          </span>
                </div>

                <nz-progress [nzPercent]="75" style="margin: 5px" nzSize="small" [nzShowInfo]="false" [nzStrokeColor]="'#13C2C2'"></nz-progress>
            </div>

        </div>
        <div class="gutter-row">
            <div class="font1 title">
                磁盘用量
            </div>

            <div class="gutter-left">
                <div class="font3">
                    2200/5000 <span class="font2" style="margin: 0px 5px">GB</span>
                </div>
                <div class="font2" style="margin: 5px 0px">
                    可用容量/总容量
                </div>
            </div>
            <div class="cut"></div>
            <div class="gutter-right">
                <div class="font3">
                    56%
                    <span class="font2">
            使用率
          </span>
                </div>
                <nz-progress [nzPercent]="56" style="margin: 5px" nzSize="small" [nzShowInfo]="false" [nzStrokeColor]="'#13C2C2'"></nz-progress>
            </div>
        </div>
        <div class="gutter-row" style="width: 96% ">
            <div class="font1 title">
                系统应用
            </div>
            <div>
                <span class="span-module">
          <img src="../assets/images/hardwaremanagement.png" />
          <span class="font1" style="margin: 10px">硬件管理中心</span>
                </span>
                <span class="span-module">
          <img src="../assets/images/create.png" />
          <span class="font1" style="margin: 10px">虚拟机创建</span>
                </span>
                <span class="span-module">
          <img src="../assets/images/IP.png" />
          <span class="font1" style="margin: 10px">IP地址修改</span>
                </span>
            </div>
        </div>
        <div class="gutter-row" style="width: 96% ">
            <div class="font1 title">
                自动化应用
            </div>
            <span class="span-module">
        <img src="../assets/images/application.png" />
        <span class="font1" style="margin: 10px">应用管理中心</span>
            </span>
            <span class="span-module">
        <img src="../assets/images/daskcontrol.png" />
        <span class="font1" style="margin: 10px">任务管理</span>
            </span>
            <span class="span-module">
        <img src="../assets/images/ANT.png" />
        <span class="font1" style="margin: 10px">AntRobot下载</span>
            </span>
            <span class="span-module">
        <img src="../assets/images/daskmodule.png" />
        <span class="font1" style="margin: 10px">业务模板</span>
            </span>
        </div>
        <div class="gutter-row" style="width: 96% ">
            <div class="font1 title">
                AI应用
            </div>
            <span class="span-module">
        <img src="../assets/images/AI.png" />
        <span class="font1" style="margin: 10px">AI能力中心</span>
            </span>
            <span class="span-module">
        <img src="../assets/images/APIServise.png" />
        <span class="font1" style="margin: 10px">API服务</span>
            </span>
            <span class="span-module">
        <img src="../assets/images/contrast.png" />
        <span class="font1" style="margin: 10px">合同对比</span>
            </span>
            <span class="span-module">
        <img src="../assets/images/CustomOCR.png" />
        <span class="font1" style="margin: 10px">自定义OCR</span>
            </span>
            <div class="span-module">
                <img src="../assets/images/review.png" />
                <span class="font1" style="margin: 10px">智能审图</span>
            </div>
        </div>
    </div>
    <div class="background_right">
        <div class="userinfo">
            <div class="userinfo_head">
                <nz-avatar [nzSize]="40" nzIcon="user" nzSrc="../assets/images/user.png"></nz-avatar>
            </div>
            <div class="userinfo_data">
                <div class="font1">
                    你好！User_name
                </div>
                <div nz-row class="userinfo_data_style1">
                    <div nz-col nzSpan="6" class="font2">账号ID</div>
                    <div nz-col nzSpan="16" class="font1">123456789</div>
                </div>
                <div class="userinfo_data_style1" style="border: 1px dashed #DFE1E6; ">
                </div>
                <div nz-row class="userinfo_data_style1">
                    <div nz-col nzSpan="6" class="font2">设备名称</div>
                    <div nz-col nzSpan="16" class="font1">AutoMate_test1</div>
                </div>
                <div nz-row class="userinfo_data_style1">
                    <div nz-col nzSpan="6" class="font2">型号</div>
                    <div nz-col nzSpan="16" class="font1">高阶版</div>
                </div>
                <div nz-row class="userinfo_data_style1">
                    <div nz-col nzSpan="6" class="font2">激活时间</div>
                    <div nz-col nzSpan="16" class="font1">2020/03/21 09:42:49</div>
                </div>
                <div nz-row class="userinfo_data_style1">
                    <div nz-col nzSpan="6" class="font2">软件版本</div>
                    <nz-badge nzStatus="error"></nz-badge>
                    <div nz-col nzSpan="12" class="font1">待更新</div>
                    <div nz-col nzSpan="3" class="font1" style="margin-left:5px;"><a>更新</a></div>
                </div>
                <div nz-row class="userinfo_data_style1">
                    <div nz-col nzSpan="6" class="font2">设备状态</div>
                    <nz-badge nzStatus="error"></nz-badge>
                    <div nz-col nzSpan="12" class="font1">已过期</div>
                    <div nz-col nzSpan="3" class="font1" style="margin-left:5px;"><a>续费</a></div>
                </div>
                <div class="userinfo_data_style1" style="border: 1px dashed #DFE1E6; ">
                </div>
                <div nz-row class="userinfo_data_style1">
                    <div nz-col nzSpan="6" class="font2">网络</div>
                    <div nz-col nzSpan="13" class="font1">内网IP地址</div>
                    <div nz-col nzSpan="3" class="font1"><a>设置</a></div>
                </div>
            </div>
        </div>
        <div class="monitor">
            <div class="font1 title monitor_add2">
                监控事件
            </div>
            <div nz-row class="monitor_item">
                <div nz-col nzSpan="23" class="monitor_itemtext">资源监控</div>
                <div nz-col nzSpan="1" class="font4">0</div>
            </div>
            <div nz-row class="monitor_item">
                <div nz-col nzSpan="23" class="monitor_itemtext">作业监控</div>
                <div nz-col nzSpan="1" class="font4">0</div>
            </div>
            <div nz-row class="monitor_item monitor_add1">
                <div nz-col nzSpan="23" class="monitor_itemtext">能力监控</div>
                <div nz-col nzSpan="1" class="font4">2</div>
            </div>
        </div>
    </div>
</div>

<nz-modal [(nzVisible)]="isVisable" nzCentered (nzOnCancel)="handleCancel()" [nzFooter]=null>
    <ng-container *nzModalContent hidden="{{successHidden}}">
        <div>
            <img src="../assets/images/ok.png" alt="" style="width: 6%;height: 14%;margin-left: 8%;">
            <div class="renew_module_title">续费成功</div>
        </div>
        <div class="renew_module_data">文子文子文子</div>
        <button class="renewbutton" (click)="clickok()">确定</button>

    </ng-container>
    <ng-container *nzModalContent hidden="{{failHidden}}">
        <div>
            <img src="../assets/images/warn.png" alt="" style="width: 6%;height: 14%;margin-left: 8%;">
            <div class="renew_module_title">续费失败</div>
        </div>
        <div class="renew_module_data">文子文子文子</div>
        <button class="renewbutton" (click)="clickok()">确定</button></ng-container>
</nz-modal>


<div class="">

</div>